<template>

	<view class="chatBox">
		<view class="chatIcon">
			<uv-icon name="account-fill" color="#aaa" size="28"></uv-icon>
		</view>
		<view class="chatCont">
			<text>
				亲，您的咨询正在被处理，请稍后
			</text>
		</view>
	</view>
	<view class="patientBox">
		<view class="patientIcon">
			<uv-icon name="account-fill" color="#aaa" size="28"></uv-icon>
		</view>
		<view class="patientCont">
			<text>
				亲，您的咨询正在被处理，请稍后
			</text>
		</view>
	</view>
	<view class="chatBox">
		<view class="chatIcon">
			<uv-icon name="account-fill" color="#aaa" size="28"></uv-icon>
		</view>
		<view class="chatFile">
			<uv-icon name="folder" color="#ccc" size="28"></uv-icon>
			<text>
				体检报告
			</text>
		</view>
	</view>
	<view class="patientBox">
		<view class="patientIcon">
			<uv-icon name="account-fill" color="#aaa" size="28"></uv-icon>
		</view>
		<view class="patientAudio">
			<view class="patientCircle">
				<uv-icon name="play-right-fill" color="#fff" size="28"></uv-icon>
			</view>
		</view>
	</view>
	<view class="chatTab">
		<uv-icon name="camera-fill" color="#aaa" size="28"></uv-icon>
		<input type="text" placeholder="说点什么">
		<uv-icon name="plus-circle" color="#aaa" size="28"></uv-icon>
		<uv-icon name="mic" color="#aaa" size="28"></uv-icon>

	</view>
</template>

<script>

</script>

<style lang="scss">
	.chatBox {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.chatIcon {
			width: 80rpx;
			height: 80rpx;
			background-color: #F4F6F6;
			border-radius: 50%;
			margin: 10rpx 30rpx;

			.uv-icon {
				padding: 10rpx 10rpx;
			}
		}

		.chatCont {
			height: 70rpx;
			padding: 20rpx;
			font-size: 28rpx;
			border-radius: 20rpx;
			border: 1rpx solid #ccc;
		}

		.chatFile {
			display: flex;
			align-items: center;
			height: 70rpx;
			border: 1rpx solid #ccc;
			border-radius: 20rpx;
			padding: 20rpx;

		}
	}

	.patientBox {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;

		.patientIcon {
			width: 80rpx;
			height: 80rpx;
			background-color: #F4F6F6;
			border-radius: 50%;
			margin: 40rpx 30rpx;

			.uv-icon {
				padding: 10rpx 10rpx;
			}
		}

		.patientCont {
			background-color: #F4F6F6;
			height: 70rpx;
			padding: 20rpx;
			font-size: 28rpx;
			border-radius: 20rpx;
		}

		.patientAudio {
			background-color: #F4F6F6;
			height: 70rpx;
			padding: 20rpx;
			font-size: 28rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
		}

		.patientCircle {
			height: 70rpx;
			width: 70rpx;
			border-radius: 50%;
			background-color: #ccc;
			padding-left: 20rpx;
			padding-top: 10rpx;
			margin: 100rpx;

		}
	}

	.chatTab {
		display: flex;
		background-color: #F4F6F6;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0;
		width: 100%;

		input {
			width: 500rpx;
			background-color: #fff;
			border: 1rpx solid #fff;
			margin: 36rpx 20rpx;
		}
	}
</style>